Cloudflare Workers上でLangChainを動かし指定したWebサイトについて質問できるか試してみた

どうも！オペレーション部の西村祐二です。

Cloudflareから下記ブログが公開され、Cloudflare WorkersでLangChainが動くことを知りました。

Using LangChainJS and Cloudflare Workers together

このブログはLangChain、Cloudflare Workersを使ったチュートリアルであり、読み込むWebページとしてブルックリンのwikipediaが利用されていました。

そこで、今回、このブログを参考に弊社クラスメソッドのカルチャーのページを読み込んで、このWebページについて質問できるか試してみました

今回は英語のページを利用します。なぜか日本語のページだとあまり回答精度がよくなかったためです。

Classmethod Leadership Principles (CLP)

成果物

デプロイ時に払い出されるWorkersのURLのクエリパラメータに question=質問内容 とすることで質問できるようにします。

• ?question=CLPとは？

きちんと、Webページの内容を読み取ってCLPはClassmethod Leadership Principlesの略であることを回答してくれています。

• ?question=CLPの要素を教えて

直訳ですが、「リーダーシップ、パートナーシップ、多様性、プロフェッショナリズム、感謝の気持ち、視点、フィードバック、アウトプット、スタート・スモール、そして楽しみ」と回答してくれています。

• ?question=明日の天気は？

Webページに記載のない関係ないことを質問すると、わからないと回答が返ってきました。

やってみる

Cloudflareのブログに記載の内容とほとんど同様ですが、試していきます

環境

• Node.js: 18.15.0

• langchain: 0.0.78

• wrangler: 3.0.0

前提条件

• OpenAI APIキーは事前に払い出しておきます

• Cloudflareが利用できる状態にしておきます

プロジェクトを作成

wranglerを使って雛形を作成します。

対話形式の入力は下記のようにしてます。

• 名前は「test-langchain」
• タイプは"Hello World" script
• TypeScriptは No
• デプロイは　No

$ npx wrangler init test-langchain

 ⛅️ wrangler 3.0.0
------------------
Using npm as package manager.
▲ [WARNING] The `init` command is no longer supported. Please use `npm create cloudflare@2` instead.

  The `init` command will be removed in a future version.


Running `npm create cloudflare@2`...
Need to install the following packages:
  create-cloudflare@2.0.7
Ok to proceed? (y) y

using create-cloudflare version 2.0.7

╭ Create an application with Cloudflare Step 1 of 3
│
├ Where do you want to create your application?
│ dir test-langchain
│
├ What type of application do you want to create?
│ type "Hello World" script
│
├ Do you want to use TypeScript?
│ typescript no
│
├ Copying files from "simple" template
│
╰ Application created

╭ Installing dependencies Step 2 of 3
│
├ Installing dependencies
│ installed via `npm install`
│
╰ Dependencies Installed

╭ Deploy with Cloudflare Step 3 of 3
│
├ Do you want to deploy your application?
│ no deploying via `npm run deploy`
│
├  APPLICATION CREATED  Deploy your application with npm run deploy
│
│ Run the development server npm run dev
│ Deploy your application npm run deploy
│ Read the documentation https://developers.cloudflare.com/workers
│ Stuck? Join us at https://discord.gg/cloudflaredev
│
╰ See you again soon!

$ cd test-langchain

下記、コマンド実行して、動作確認しておきます。

ローカルサーバが起動して、ローカルで動作確認することができます。 bを押すと自動的にブラウザが開きます。

Hello Worldと画面上に表示されていればOKです

$ npm run start

動作確認できたら、ローカルサーバを停止しておきます。

ライブラリインストール

langchainとWebページを読み込むときに利用するcheerioをインストールしておきます。

$ npm install langchain cheerio

今回はCherryioを使っていますが、LangChainは他にもPuppeteerやPlaywrightなど多くのライブラリに対応しているので、Webローダーを変更して試してみることもできます。

Web Loaders | ?️? Langchain

実装

LangChainを使ってWebページに関する質問ができるように workers.jsを下記のように修正します。

import { CheerioWebBaseLoader } from 'langchain/document_loaders/web/cheerio';
import { OpenAIEmbeddings } from 'langchain/embeddings/openai';
import { MemoryVectorStore } from 'langchain/vectorstores/memory';
import { OpenAI } from 'langchain/llms/openai';
import { RetrievalQAChain } from 'langchain/chains';

export default {
  async fetch(request, env, ctx) {
	url = 'https://classmethod.jp/english/leadership-principles/';
    const loader = new CheerioWebBaseLoader(url);
    const docs = await loader.load();
    const store = await MemoryVectorStore.fromDocuments(docs, new OpenAIEmbeddings({ openAIApiKey: env.OPENAI_API_KEY }));

    const model = new OpenAI({ openAIApiKey: env.OPENAI_API_KEY });
    const chain = RetrievalQAChain.fromLLM(model, store.asRetriever());

    const { searchParams } = new URL(request.url);
    const question = searchParams.get('question') ?? 'この記事は何ですか?CLPとはなんですか？';
    const res = await chain.call({
      query: question,
    });
    return new Response(res.text);
  },
};

簡単に解説していきます。

• CheerioWebBaseLoader

CheerioWebBaseLoaderを使用して指定したウェブサイト（今回はhttps://classmethod.jp/english/leadership-principles/）からデータをロードします。Cloudflareのブログでは読み込むページがそれなりに規模の大きいページなのでloadAndSplitを使っていますが、今回は小さいページなのでloadのまま利用しています。

• MemoryVectorStore

ベクトル情報を保存する場所として、一時的なメモリ内ベクトルストアであるMemoryVectorStoreを使用します。

• OpenAIEmbeddings

'OpenAIEmbeddings'を使用して、読み込んだドキュメントからベクトル情報を作成します。OpenAIのAPIキーを使用します。

• RetrievalQAChain

'OpenAI'と'RetrievalQAChain'を使用して、質問応答のモデルを作成します。このモデルは、Embeddingされたドキュメントと質問を入力として受け取り、質問に対する回答を生成します。

• fetch関数

'fetch'関数内で、リクエストから質問を取得し、質問応答モデルを使用して回答を生成します。質問はURLの'question'パラメータから取得します。もし質問がない場合は、デフォルトの質問'この記事は何ですか?CLPとはなんですか？'が使用されます。

ローカルで動作確認

ローカルでOpenAIのAPIキーの環境変数を読み込むために.dev.varsを作成しておきます

OPENAI_API_KEY=sk-XXXXXXXXXX

下記コマンドでローカルサーバが起動して、ローカルで動作確認することができます。 ローカルサーバが起動したら、bを押すと自動的にブラウザが開きます。

$ npm run start

URLのクエリパラメータに ?question=質問内容 とすることで質問して、回答が返ってくるか試してみましょう。

環境変数をCloudflare上に登録

デプロイの前に環境変数をCloudflare Workersに登録しておきます。

下記コマンドを実行すると、valueがきかれるのでOpenAIのAPIキーを入力して登録します。

$ npx wrangler secret put OPENAI_API_KEY

登録できたらCloudflare Workersの画面上から確認することができます。

デプロイ

下記コマンドでCloudflare上にデプロイできます。

$ npm run deploy    

デプロイが完了したらCloudflare WorkersのURLが発行されるのでアクセスして、ローカルと同様に動作する確認しましょう。

さいごに

Cloudflare Workers上でLangChainを動かし指定したWebサイトについて質問できるチュートリアルを試してみました。

これから、LangChain、Cloudflare Workersを使ってアプリケーションを作るための、はじめの一歩として活用できるかなと思います。

誰かの参考になれば幸いです。